<template>
  <div>
    <div class="table_title">
      焊接参数异常追溯表
    </div>
    <div class="table_tr">
      <div class="table_td_title">
        客户名称
      </div>
      <div class="table_td_title">
        123
      </div>
      <div class="table_td_title">
        工件名称
      </div>
      <div class="table_td_title">
        活动支腿
      </div>
    </div>

    <div class="table_tr">
      <div class="table_td_title">
        工件图号
      </div>
      <div class="table_td_title">
        123
      </div>
      <div class="table_td_title">
        工件编号
      </div>
      <div class="table_td_title">
        活动支腿
      </div>
    </div>

    <div class="table_tr">
      <div class="table_td_title">
        焊接操作者
      </div>
      <div class="table_td_title">
        123
      </div>
      <div class="table_td_title">
        焊接时间
      </div>
      <div class="table_td_title">
        活动支腿
      </div>
    </div>

    <!--    图表的渲染-->
    <div class="table_content_echarts">
      <div class="content_echarts" :id="canvas" :style="{'height':height,'width':width_props}"></div>
    </div>
    <div class="table_tr">
      <div class="table_td_title">
        平均焊接电流
      </div>
      <div class="table_td_title">
        123
      </div>
      <div class="table_td_title">
        平均焊接电压
      </div>
      <div class="table_td_title">
        活动支腿
      </div>
    </div>
    <div class="table_tr">
      <div class="table_td_title">
        焊接时长
      </div>
      <div class="table_td_title">
        123
      </div>
      <div class="table_td_title">
        参数异常率
      </div>
      <div class="table_td_title">
        活动支腿
      </div>
    </div>
  </div>
</template>

<script>
import {dataURLtoFile} from "@/utils/base_to_file";
import {getStyleByEl} from "@/utils/dom/get_dom_style";

export default {
  name: "template",
  props: {
    content_data: {
      type: Object,
      default: {}
    },
    option: {
      type: Object,
      default: {}
    },
    canvas: {
      type: String,
      default: ""
    },
    width_props: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      height: "",
      width: ""
    }
  },
  methods: {
    init_echarts(option) {

      const echarts = this.$echarts.init(document.getElementById(this.canvas));
      echarts.setOption(option)
      const resultBase64 = echarts.getDataURL({
        type: 'png',
        pixelRatio: 2,
        // backgroundColor: '#fff'
      });
      console.log(resultBase64)
      // console.log(dataURLtoFile(resultBase64, "test"))
      // upload(dataURLtoFile(resultBase64, "test"))
      window.addEventListener("resize", function () {
        echarts.resize();
      });

    }
  },
  mounted() {
    const el = document.querySelector('.table_content_echarts');
    const style = getStyleByEl(el)
    this.height = style.height;
    this.width = style.width
  }
}
</script>

<style scoped lang="scss">
.table_title {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table_content_echarts {
  display: flex;
  width: 100%;
  border: 1px solid black;
  height: 20rem;
  display: flex;
  justify-content: center;
  //align-items: center;
}

.content_echarts {
  //width: 100%;
  display: flex;
  justify-content: center;
  //height: 10rem;
}

.table_tr {
  display: flex;
  align-items: center;

  .table_td_title {
    flex: 1;
    font-size: 1rem;
    border: 1px solid black;
    height: 2rem;
  }
}
</style>
